<template>
  <div class="login_container">
    <van-nav-bar
      title="登录"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <van-form @submit="submit"
      :show-error-message="false"
      :show-error="false"
    >
      <van-field
        v-model="formdata.name"
        name="用户名"
        label="用户名"
        placeholder="用户名"
        :rules="nameRules"
      >
      </van-field>
      <van-field
        v-model="formdata.password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="passwordRules"
      />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">登录</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { login } from '@/api'
export default {
  name: 'Login',
  data () {
    return {
      formdata: {
        name: '',
        password: ''
      },
      nameRules: [{ required: true, message: '请填写用户名' }],
      passwordRules: [{ required: true, message: '请填写密码' }]
    }
  },
  methods: {
    async submit () {
      const res = await login(this.formdata)
      console.log(res)
    }
  }
}
</script>

<style lang="less" scoped>
.login_container {
  background-color:var(--box-bg);
  min-height: 100vh;
  .van-nav-bar{
    background-color: var(--main-bg);
  }
}

</style>
